<div class="modal-header">
    <button type="button" class="close" ng-click="cancel()">&times;</button>
    <span class="bebas modal-title" style="color: #657B83;font-size: 19px">
        <i class="fa fa-shield"></i> &nbsp;Bulk Import Permissions</span>
</div>

<div class="modal-body">
    <table cellpadding="0" cellspacing="0" style="width: 560px">
        <tr>
            <td>
                <table width="100%" style="border-top: 1px solid #e1e1e1">
                    <tr>
                        <td ng-repeat="pane in panes">
                            <div ng-click="activateTab(pane)" class="font-95em"
                                 ng-class="{folder_permission_tab_active:pane.selected, folder_permission_tab_inactive:!pane.selected}">
                                {{pane.title}}
            <span style="float: right">
                <div ng-show="pane.selected" class="edit_icon font-12em">
                    <i ng-click="showAddPermissionOptionsClick()" class="fa fa-plus-circle"></i></div>
                <div ng-hide="pane.selected" class="edit_icon font-12em">{{pane.count || 0}}</div>
            </span>
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td colspan="2" style="border-left: 1px solid #e1e1e1">
                            <div class="tab-pane" ng-show="selected"></div>
                        </td>
                    </tr>
                </table>
            </td>
        </tr>

        <tr>
            <td>
                <!--user select filter-->
                <div ng-if="showPermissionInput">
                    <input type="text" placeholder="Enter name or email" ng-model="userFilterInput"
                           ng-change="filter(userFilterInput)" style="width: 220px;">

                    <div style="overflow: auto; max-height: 120px;" class="pad-8">

                        <div ng-if="!filtering && !accessPermissions" style="opacity: 0.7; padding: 3px 0 3px 0">
                            <i>No matches found</i>
                        </div>

                        <div ng-repeat="permission in accessPermissions | orderBy:'display'">
                           <span ng-click="addRemovePermission(permission)" class="cursor_pointer">
                            <i class="fa opacity_hover"
                               ng-class="{'fa-square-o':!permission.selected, 'fa-check-square-o':permission.selected}"></i>
                            <i class="fa" ng-class="{'fa-group permission_group':permission.article==='GROUP',
                            'fa-user permission_user':permission.article==='ACCOUNT'}"></i> {{permission.display}}
                            </span>
                        </div>
                    </div>

                    <div style="background-color: #f9f9f9; height: 24px">
                        <button type="button" class="btn btn-xs btn-default pull-right"
                                ng-click="closePermissionOptions()">Close
                        </button>
                    </div>
                </div>

                <div style="width: 100%; font-size: 0.90em; overflow: auto; padding: 3px;"
                     ng-repeat="permission in activePermissions | orderBy:'display'">
                    &nbsp;
                    <span ng-if="permission.article=='GROUP'"><i class="fa fa-group permission_group"></i> {{permission.display}}</span>
                <span ng-if="permission.article=='ACCOUNT'"><i class="fa fa-user permission_user"></i> <a
                        ng-href="profile/{{permission.articleId}}">{{permission.display}}</a></span>
                    <i ng-click="deletePermission($index, permission)" style="padding-top: 3px"
                       class="fa fa-trash-o delete_icon"></i>
                </div>
                <div ng-if="activePermissions.length == 0">&nbsp;</div>
            </td>
        </tr>
        <tr>
            <td class="pad_top"></td>
        </tr>
    </table>
</div>